import cx from 'classnames';
import * as React from 'react';
import Select from '../../../../Select';
import { prefix } from '../../../../config';
import { getPrefixCls } from '../../../../utils';
import type { EditableCell } from './type';

export interface EditableSelectProps extends EditableCell {
  value: any;
}
const cellPrefixCls = getPrefixCls(prefix.editableTable, 'cell');

export default function EditableSelect(props: EditableSelectProps) {
  const {
    align,
    columnId,
    curModalParams,
    value,
    onChange,
    onBlur,
    onClick,
    onDoubleClick,
    onMouseEnter,
    onMouseLeave,
    ...restProps
  } = props;

  return (
    <Select
      {...restProps}
      className={cx(align, `${cellPrefixCls}__component`)}
      bordered={false}
      value={value}
      onChange={(value) => {
        onChange(value);
        onBlur(value);
      }}
      onClick={
        onClick && onClick.bind(this, { id: columnId, params: curModalParams })
      }
      // onDoubleClick={onDoubleClick && onDoubleClick.bind(this, columnId)}
      onMouseEnter={
        onMouseEnter &&
        onMouseLeave.bind(this, { id: columnId, params: curModalParams })
      }
      onMouseLeave={
        onMouseLeave &&
        onClick.bind(this, { id: columnId, params: curModalParams })
      }
    />
  );
}
